import 'dart:convert';

import 'package:elephant_fish/http/core/hi_net.dart';
import 'package:elephant_fish/http/request/base_request.dart';
import 'package:elephant_fish/http/request/user_info_request.dart';
import 'package:elephant_fish/model/user_info_entity.dart';
import 'package:elephant_fish/util/TxUtils.dart';
import 'package:elephant_fish/util/size_util.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'login_page.dart';

class WalletPage extends StatefulWidget {
  const WalletPage({Key key}) : super(key: key);

  @override
  _WalletPageState createState() => _WalletPageState();
}

class _WalletPageState extends State<WalletPage> {
  UserInfoEntity userInfoEntity;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getInitData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff140c3d),
      appBar: AppBar(
        leading: GestureDetector(
          child: Icon(
            Icons.arrow_back_ios,
            size: SizeUtil.px(32),
            color: Color(0xfff3f3f3),
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        backgroundColor: Color(0xff140c3d),
        centerTitle: true,
        title: Text(
          '钱包',
          style: TextStyle(fontSize: SizeUtil.px(32), color: Color(0xfff3f3f3)),
        ),
      ),
      body: Column(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: SizeUtil.px(686),
              height: SizeUtil.px(287.31),
              decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.all(Radius.circular(SizeUtil.px(10))),
                image: DecorationImage(
                    image: AssetImage('assets/images/wallet_bg.png')),
              ),
              child: Column(
                children: [
                  SizedBox(
                    height: SizeUtil.px(61),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Text(
                      '我的金币',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(27)),
                    ),
                  ),
                  SizedBox(
                    height: SizeUtil.px(24),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Text(
                      userInfoEntity == null ? '0' : userInfoEntity.currentGold,
                      style: TextStyle(
                          color: Color(0xfff3f3f3),
                          fontSize: SizeUtil.px(63),
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: SizeUtil.px(20),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Padding(
              padding: EdgeInsets.only(left: SizeUtil.px(32)),
              child: Text(
                '请选择充值金额',
                style: TextStyle(
                  color: Color(0xff999999),
                  fontSize: SizeUtil.px(26),
                ),
              ),
            ),
          ),
          SizedBox(
            height: SizeUtil.px(44),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: SizeUtil.px(220),
                height: SizeUtil.px(140),
                decoration: BoxDecoration(
                  color: Color(0xff59527a),
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(5))),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '10元',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(30)),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/rank_money.png',
                          width: SizeUtil.px(24.46),
                          height: SizeUtil.px(25.16),
                        ),
                        Text(
                          '1000钻',
                          style: TextStyle(
                              color: Color(0xfff3f3f3),
                              fontSize: SizeUtil.px(20)),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                width: SizeUtil.px(13),
              ),
              Container(
                width: SizeUtil.px(220),
                height: SizeUtil.px(140),
                decoration: BoxDecoration(
                  color: Color(0xff59527a),
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(5))),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '100元',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(30)),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/rank_money.png',
                          width: SizeUtil.px(24.46),
                          height: SizeUtil.px(25.16),
                        ),
                        Text(
                          '10000钻',
                          style: TextStyle(
                              color: Color(0xfff3f3f3),
                              fontSize: SizeUtil.px(20)),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                width: SizeUtil.px(13),
              ),
              Container(
                width: SizeUtil.px(220),
                height: SizeUtil.px(140),
                decoration: BoxDecoration(
                  color: Color(0xff59527a),
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(5))),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '300元',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(30)),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/rank_money.png',
                          width: SizeUtil.px(24.46),
                          height: SizeUtil.px(25.16),
                        ),
                        Text(
                          '30000钻',
                          style: TextStyle(
                              color: Color(0xfff3f3f3),
                              fontSize: SizeUtil.px(20)),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
          SizedBox(
            height: SizeUtil.px(26),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: SizeUtil.px(220),
                height: SizeUtil.px(140),
                decoration: BoxDecoration(
                  color: Color(0xff59527a),
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(5))),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '500元',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(30)),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/rank_money.png',
                          width: SizeUtil.px(24.46),
                          height: SizeUtil.px(25.16),
                        ),
                        Text(
                          '50000钻',
                          style: TextStyle(
                              color: Color(0xfff3f3f3),
                              fontSize: SizeUtil.px(20)),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                width: SizeUtil.px(13),
              ),
              Container(
                width: SizeUtil.px(220),
                height: SizeUtil.px(140),
                decoration: BoxDecoration(
                  color: Color(0xff59527a),
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(5))),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '1000元',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(30)),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/rank_money.png',
                          width: SizeUtil.px(24.46),
                          height: SizeUtil.px(25.16),
                        ),
                        Text(
                          '100000钻',
                          style: TextStyle(
                              color: Color(0xfff3f3f3),
                              fontSize: SizeUtil.px(20)),
                        ),
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(
                width: SizeUtil.px(13),
              ),
              Container(
                width: SizeUtil.px(220),
                height: SizeUtil.px(140),
                decoration: BoxDecoration(
                  color: Color(0xff59527a),
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(5))),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      '2000元',
                      style: TextStyle(
                          color: Color(0xfff3f3f3), fontSize: SizeUtil.px(30)),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/rank_money.png',
                          width: SizeUtil.px(24.46),
                          height: SizeUtil.px(25.16),
                        ),
                        Text(
                          '200000钻',
                          style: TextStyle(
                              color: Color(0xfff3f3f3),
                              fontSize: SizeUtil.px(20)),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
          SizedBox(
            height: SizeUtil.px(42),
          ),
          Row(
            children: [
              Align(
                alignment: Alignment.topLeft,
                child: Padding(
                  padding: EdgeInsets.only(left: SizeUtil.px(32)),
                  child: Text(
                    '其他金额',
                    style: TextStyle(
                        color: Color(0xffffffff), fontSize: SizeUtil.px(26)),
                  ),
                ),
              ),
              SizedBox(
                width: SizeUtil.px(47),
              ),
              Container(
                width: SizeUtil.px(500),
                child: TextField(
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    isCollapsed: true,
                    contentPadding: EdgeInsets.all(0),
                    border: InputBorder.none,
                    hintText: '请输入其他金额',
                    hintStyle: TextStyle(
                        color: Color(0xff999999), fontSize: SizeUtil.px(26)),
                  ),
                  style: TextStyle(
                      color: Color(0xffffffff), fontSize: SizeUtil.px(26)),
                ),
              )
            ],
          ),
          SizedBox(
            height: SizeUtil.px(60),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Padding(
              padding: EdgeInsets.only(left: SizeUtil.px(32)),
              child: Text(
                '请选择支付方式',
                style: TextStyle(
                    color: Color(0xff999999), fontSize: SizeUtil.px(26)),
              ),
            ),
          ),
          SizedBox(
            height: SizeUtil.px(44),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/images/alipay.png',
                width: SizeUtil.px(252),
                height: SizeUtil.px(88),
              ),
              SizedBox(
                width: SizeUtil.px(89),
              ),
              Image.asset(
                'assets/images/wchatpay.png',
                width: SizeUtil.px(252),
                height: SizeUtil.px(88),
              ),
            ],
          ),
          SizedBox(
            height: SizeUtil.px(63),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: SizeUtil.px(686),
              height: SizeUtil.px(87),
              decoration: BoxDecoration(
                  borderRadius:
                      BorderRadius.all(Radius.circular(SizeUtil.px(44))),
                  color: Color(0xffe62d6c)),
              child: Center(
                child: Text(
                  '立即充值',
                  style: TextStyle(
                      color: Color(0xffffffff), fontSize: SizeUtil.px(32)),
                ),
              ),
            ),
          ),
          SizedBox(
            height: SizeUtil.px(27),
          ),
          RichText(
            text: TextSpan(
                text: '已阅读并同意',
                style: TextStyle(
                    fontSize: SizeUtil.px(20), color: Color(0xfff3f3f3)),
                children: [
                  TextSpan(
                    text: '《用户充值协议》',
                    style: TextStyle(
                        fontSize: SizeUtil.px(20), color: Color(0xffff215d)),
                    recognizer: TapGestureRecognizer()..onTap = () {},
                  )
                ]),
          ),
        ],
      ),
    );
  }

  Future<void> getInitData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String appToken = prefs.getString('app-token');
    BaseRequest request = UserInfoRequest();
    request.add('type', 2).addHeader('usertoken', appToken);
    var result = await HiNet.getInstance().fire(request);
    if (result['code'] == -1) {
      TxUtils.showErrorToast('登录失效，请重新登录', context);
      Navigator.pop(context);
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) {
          return LoginPage(
            arguments: {'loginCode': '-1'},
          );
        },
      ));
    }
    setState(() {
      userInfoEntity = UserInfoEntity.fromJson(
          new Map<String, dynamic>.from(result['data']));
    });
  }
}
